<!--
 * @Author       : wfl
 * @LastEditors: fj
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-03-29 15:53:18
 * @LastEditTime: 2023-09-14 12:20:51
-->
<script lang="ts" setup name="IkPageHeader">
import useTabbarStore from '@g/store/modules/tabbar'

const props = defineProps({
  title: { type: String, default: '返回' },
  icon: { type: String, default: '' },
  backgroundColor: { type: String, default: '#1ABF8B' },
  // 是否自动返回上一个路由
  autoBack: { type: Boolean, default: false },
  // 底部边框
  border: { type: Boolean, default: false },
  // TODO 是否为路由模式
  // modeRoute: { type: Boolean, default: false },
  // 是否自动关闭当前tab
  autoClose: { type: Boolean, default: true },
  // padding值
  padding: { type: String, default: '0 20px' },
  // padding值
  shadow: { type: Boolean, default: false },
  // 标题样式
  titleClass: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['back'])
const router = useRouter()
const tabbarStore = useTabbarStore()
const handBack = () => {
  if (props.autoClose)
    tabbarStore.remove(location.hash.slice(1))

  props.autoBack ? router.back() : emit('back')
}
</script>

<template>
  <el-affix v-bind="{ ...props, ...$attrs }">
    <div
      class="ikwf-page-header"
      :class="`${border ? 'border' : null} ${shadow ? 'shadow' : null}`"
      :style="{ padding }"
    >
      <div class="left">
        <IkSvgIcon
          pop
          title="返回"
          :start-margin="false"
          :size="23"
          name="iksvg_fanhui"
          @click="handBack"
        />
        <slot v-if="$slots.icon" name="icon"></slot>
        <IkIconImage
          v-else
          v-show="icon"
          :background-color="backgroundColor"
          :icon="`ik ikflow ${icon}`"
          class="ml-[8px]"
        />
        <span class="line">|</span>
        <slot v-if="$slots.title" name="title"></slot>
        <span class="title" :class="titleClass"> {{ title }} </span>
      </div>
      <div v-if="$slots.center" class="center">
        <slot name="center"> </slot>
      </div>
      <div class="right" :style="{ flex: $slots.center ? 1 : 'unset' }">
        <slot name="right"></slot>
      </div>
    </div>
  </el-affix>
</template>

<style lang="scss" scoped>
.ikwf-page-header {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 20px;
  background: var(--el-bg-color);
  z-index: 1;
  height: var(--ik-card-header-height);
  box-sizing: border-box;
  user-select: none;
  // box-shadow: var(--el-box-shadow-light);

  &.shadow{
    box-shadow: var(--el-box-shadow-light);
  }

  &.border {
    border-bottom: 1px solid var(--el-border-color);
  }

  .left,
  .center{
    flex: 1;
  }

  .left {
    display: flex;
    align-items: center;
    margin-left: -10px;
    flex: 1;

     .line {
      margin-right: 16px;
      margin-left: 6px;
      line-height: 100%;
      overflow: hidden;
      display: inline-block;
      color: var(--el-border-color);
     }

    .title {
      color: var(--el-text-color-regular);
    }

    .el-icon {
      font-size: 20px;
      border: 1px solid var(--el-border-color);
      border-radius: 50%;
      padding: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background-color: var(--el-color-primary);
        color: #fff;
      }
    }
  }

  .center {
    min-width: 600px;
    max-width: 600px;
    display: flex;
    justify-content: center;
  }

  .right {
    text-align: right;
  }
}
</style>
